<template>
	<view>
		<swiper
			class="swiper"
			:indicator-dots="indicatorDots"
			:autoplay="autoplay"
			:interval="interval"
			:duration="duration"
			@change="bindchange"
			:style="{ height: imgheights[current] + 'px' }"
		>
			<swiper-item v-for="image in goodsItem.albums"><image @load="imageLoad" mode="widthFix" class="album" :src="image" /></swiper-item>
		</swiper>

		<view class="goods_info">
			<view class="title">{{ goodsItem.title }}</view>
			<view class="price">￥{{ goodsItem.price }}</view>
		</view>

		<view class="goods-comment mb20" v-if="evaluateLists.length">
			<view class="my-cell" @click="goEvaluateLists()">
				<view class="title">商品评价</view>
				<view class="info">全部评价</view>
				<view class="icon"><text class="iconfont icon-ziyuan3"></text></view>
			</view>

			<view class="comment-list-content" v-for="evaluate in evaluateLists" :key="evaluate.id">
				<view class="comment-title">
					<image class="avatar" :src="evaluate.avatar" />
					<view class="nickname">{{ evaluate.nickname }}</view>
					<view class="rate"><uni-rate v-model="evaluate.rank" size="16" ></uni-rate></view>
				</view>
				<view class="comment-content">{{ evaluate.content }}</view>
			</view>
		</view>

		<view class="goods-comment mb20" v-if="evaluateLists.length == 0">
			<view class="evaluate_empty">暂无商品评价</view>
		</view>

		
		<view class="my-cell" >
			<view class="title">商品详情</view>
		</view>
		
		<view class="goods_content">
			<view class="content_img" v-for="image in goodsItem.contentImages">
				<easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="image" :open-transition="true"></easy-loadimage>
			</view>
		</view>

		<view class="alertBox" v-if="dialogShow">
			<view class="bg"></view>
			<view class="alert">
				<view class="alertHeader">
					<text class="iconfont icon-kefunv"></text>
					<view class="title">客服中心</view>
					<view class="info">Hi！请问您需要什么帮助？</view>
				</view>
				<view class="alertContent">
					<view class="btn btn-primary mb1" :href="'tel:4006567921'">贵宾热线：4006000000</view>
					<view class="btn" @click="dialogShow = false">取消</view>
				</view>
				<text class="iconfont icon-guanbi1 close" @click="dialogShow = false"></text>
			</view>
		</view>

		<view class="footer"><uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" /></view>
	</view>
</template>

<script>
import CFG from '../../config.js';
import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue';

import uniRate from '@/components/uni-rate/uni-rate.vue';

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
	components: { easyLoadimage, uniGoodsNav, uniRate },

	data() {
		return {
			goods_id: 0,
			dialogShow: false,
			cartItems: {
				id: 0,
				image: '',
				title: '',
				price: 0
			},
			//所有图片的高度
			imgheights: [],
			//图片宽度
			imgwidth: 750,
			//默认
			current: 0,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			goodsItem: {
				albums: [],
				contentImages: []
			},
			evaluateLists: [],
			dialogShow: false,
			scrollTop: 0,
			options: [
				{
					icon: 'home',
					text: '主页'
				},
				{
					icon: 'chat',
					text: '客服'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 0
				}
			],
			buttonGroup: [
				{
					id: 1,
					text: '加入购物车',
					backgroundColor: '#000000',
					color: '#fff'
				},
				{
					id: 2,
					text: '立即购买',
					backgroundColor: CFG.colorPrimary,
					color: '#fff'
				}
			]
		};
	},

	onPageScroll({ scrollTop }) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		this.scrollTop = scrollTop;
	},

	onLoad(option) {
		this.test(option.id);
		this.goods_id = option.id;

		this.options[2].info = this.counter;
	},

	computed: {
		...mapState(['cart', 'allSelsect']),

		counter() {
			let that = this;

			let c = 0;
			// 检查当前商品 在购物车里 有几件
			this.cart.some(item => {
				//console.log(item.productId + ':' + that.goods_id);
				if (item.productId == that.goods_id) {
					c = item.quantity;
				}
			});

			//

			return c;
		}
	},

	methods: {
		
		
		// 跳转到评论页面
		goEvaluateLists(goods_id){
			
			uni.navigateTo({
				url: './evaluateLists?goods_id=' + this.goods_id
			})
			
			},
		
		// 加入购物车
		addGoodsToCart() {
			if (this.counter > 0) {
				this.$store.commit('ADDNUM', this.cartItems.id);
			} else {
				this.$store.commit('ADDGOODS', this.cartItems);
			}
			// 手动更新购物车数量
			this.options[2].info = this.counter;
		},

		//直接下单
		quickBuy() {
			if (this.counter > 0) {
				uni.navigateTo({
					url: '../cart/cart'
				});
			} else {
				this.$store.commit('ADDGOODS', this.cartItems);
				uni.navigateTo({
					url: '../cart/cart'
				});
			}
		},

		onClick(e) {
			// console.log(e.content.icon)

			switch (e.content.icon) {
				case 'home':
					uni.navigateTo({
						url: './home'
					});
					break;
				case 'chat':
					this.dialogShow = true;
					break;
				case 'cart':
					uni.navigateTo({
						url: '../cart/cart'
					});
					break;
			}
		},
		buttonClick(e) {
			switch (e.content.id) {
				case 1:
					this.addGoodsToCart();
					break;
				case 2:
					this.quickBuy();
					break;
			}

			// console.log(e)
			//  this.options[2].info++
		},
		bindchange(e) {
			this.current = e.detail.current;
		},

		imageLoad(e) {
			var imgwidth = e.detail.width,
				imgheight = e.detail.height,
				//宽高比
				ratio = imgwidth / imgheight;
			console.log(imgwidth, imgheight);
			//计算的高度值
			var viewHeight = 750 / ratio;
			var imgheight = viewHeight;
			var imgheights = this.imgheights;
			//把每一张图片的对应的高度记录到数组里
			imgheights[e.target.dataset.id] = imgheight;

			this.imgheights = imgheights;
		},
		test(goods_id) {
			this.$http.post('/shop.goods/read', { goods_id: goods_id }).then(res => {
				this.goodsItem = res.data.data;

				// 购物车专用
				this.cartItems.id = this.goodsItem.id;
				this.cartItems.image = this.goodsItem.image;
				this.cartItems.title = this.goodsItem.title;
				this.cartItems.price = this.goodsItem.price;

				this.evaluateLists = res.data.data.evaluateLists;
			});
		}
	}
};
</script>

<style lang="scss">
.goods-comment {
	background-color: #fff;
	
	.evaluate_empty{
		padding: 24rpx;
		font-size: 1.1em;
		font-weight: bold;
	}

	.comment-list-content {
		padding: 24rpx;

		.comment-title {
			 
			display: flex;			
			align-items: center;
 
			image.avatar {
				width: 70rpx;
				height: 70rpx;
				margin-right: 10px;
				border-radius: 35rpx;
			}

			.nickname {
				font-size: 1.1em;
			}

			.rate {		
				margin-left: auto;
			}
		}

		.comment-content {
			color: #111;
			padding: 15px 0 5px 0;
			word-break: break-all;
		}
	}
}

.alertBox {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 99;
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background: #000;
		z-index: -1;
	}
	.alert {
		font-size: 13px;

		.alertHeader {
			margin-bottom: 30px;
			text.iconfont {
				font-size: 60px;
			}
			.title {
				font-weight: bold;
			}
			.info {
				color: #8f8f8f;
			}
		}

		text-align: center;
		position: absolute;
		padding: 10px;
		top: 50%;
		left: 50%;
		width: 80%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		background-color: #fff;
		.close {
			top: -30px;
			right: 0px;
			position: absolute;
			color: white;
			font-size: 24px;
		}
	}
}

.easy-loadimage {
	width: 100%;
	min-height: 100rpx;
}

swiper {
	height: 750rpx;
}
swiper-item {
	height: 750rpx; //这里可以设置比上面高度小（留出大标语位置）或者设置一样大
}
// .swiper{
// 	height: 100%;
// }
image.album {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	display: block;
}

.goods_info {
	font-size: 30rpx;
	margin-bottom: 20rpx;
	background-color: white;
	padding: 30rpx;
	.title {
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.price {
		color: $colorPrimary;
	}
}

.evaluate {
	margin-bottom: 20rpx;
}



.footer {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	border-top: 1px solid #eee;
	background-color: #fff;
}
</style>
